<!--TODO 感觉元素没有垂直对其，需要调整-->
<template>
  <div v-show="header.showBreadCrumb" class="breadcrumb">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
          v-for="item in currentRoute.matched"
          :key="item.path"
          v-show="item.meta.title"
          :to='item.path'>
        {{ item.meta?.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import {useLayouts} from "@/stores/modules/layouts.ts";

// 获取 layouts 状态
const layouts = useLayouts()
// 使用 storeToRefs 解构出来的属性默认是只读的，不能改变值，修改也无法响应式更新
const { header } = storeToRefs(layouts)

// 获取当前路由
const currentRoute = useRoute()
</script>

<style scoped lang="scss">

</style>